

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
<div ng-controller="Controller">
    <form novalidate class="css-form">
        Name:
        <input type="text" ng-model="user.name" required /><br />
        邮箱: <input type="email" ng-model="user.email" required /><br />
        性别: <label><input type="radio" ng-model="user.gender" value="male" />男</label>
        <label><input type="radio" ng-model="user.gender" value="female" />女</label><br />
        <button ng-click="reset()">重置</button>
        <button ng-click="update(user)">保存</button>
    </form>
    <pre>form =  {{user | json}} </pre>
    <pre>master =  {{master | json}} </pre>
</div>

<style type="text/css">
    .css-form input.ng-invalid.ng-dirty {
        background-color: #FA787E;
    }

    .css-form input.ng-valid.ng-dirty {
        background-color: #78FA89;
    }
</style>
</body>
<script type="text/javascript">
    function Controller($scope) {
        $scope.master = {};

        $scope.update = function(user) {
            $scope.master = angular.copy(user);
        };

        $scope.reset = function() {
            $scope.user = angular.copy($scope.master);
        };

        $scope.reset();
    }
</script>
</html>

